<template>
    <div class="accounting">
        <img
            class="ssfgk-bj"
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/m_ssfgk_bj.png"
            alt="税收法规库"
        />
        <div class="cswd-title">小竹问答</div>
        <div class="search">
            <van-search
                v-model="value"
                shape="round"
                show-action
                background="transparent"
                placeholder="请输入搜索关键词"
                @focus="searchAction = true"
                @blur="searchAction = false"
                @search="onSearch"
                >
                <template #action>
                    <div class="search-action" :style="{width: searchAction ? '1.9rem' : 0}" @click="onSearch">搜索</div>
                </template>
            </van-search>
        </div>
        <div class="ask">
            <div class="ask-item bg1" @click="show = true">
                <img
                    src="~/assets/images/cswd/ask_item_left.png"
                    alt="快速提问"
                />
                <div class="info">
                    <div>快速提问</div>
                    <span>1分钟内有回复</span>
                </div>
            </div>
            <nuxt-link to="/cswd/zjwd/1">
                <div class="ask-item bg2" style="width: 100%">
                    <img
                        src="~/assets/images/cswd/ask_item_right.png"
                        alt="问专家"
                    />
                    <div class="info">
                        <div>问专家</div>
                        <span>专业人士在线解答</span>
                    </div>
                </div>
            </nuxt-link>
        </div>

        <div class="data-list">
            <div class="data-tabs">
                最新问答
                <div class="line"></div>
            </div>
            <nuxt-link
                :to="`/cswd/${item.id}.html`"
                v-for="(item, index) in jxwtList"
                :key="index"
                class="data-item"
            >
                <div class="data-title">
                    {{ item.subtitle ? item.subtitle : item.title }}
                </div>
                <div class="teacher">
                    <div class="user">
                        <img :src="item.avatar" :alt="item.nickname" />
                        {{ item.nickname }}
                    </div>
                    <div class="teacher-ask">
                        {{ showMessage(item.first_answer) }}
                    </div>
                </div>
                <div class="time-view">
                    <div>{{ item.add_time_text }}</div>
                    <div>{{ item.page_view }}浏览</div>
                </div>
            </nuxt-link>
            <div class="page">
                <van-pagination
                    v-model="page"
                    :total-items="total"
                    :show-page-size="3"
                    :items-per-page="10"
                    force-ellipses
                    @change="changePage"
                />
            </div>
        </div>

        <van-dialog
            v-model="show"
            title=""
            show-cancel-button
            confirm-button-text="下载APP"
            confirm-button-color="#0177FD"
            @confirm="downLoadAPP"
        >
            <div class="moban-dialog">
                <div class="text1">下载小竹财税APP</div>
                <div class="text2">立即提问</div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
import { getJhmjList } from "@/assets/api/csjhApi";
import { goTopSmooth, downLoadAPP2 } from "@/assets/utils/utils";
import { getanalysedata } from "@/assets/api/indexApi";
import { Toast } from "vant";
export default {
    async asyncData({ params, query }) {
        let data = {
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/cswd/",
                images: [""],
                title: "小竹财税问答-【小竹财税平台】",
                description:
                    "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                pubDate: "",
                upDate: "",
            },
            jxwtList: [],
            page: 1,
            total: 0,
        };

        if (query.page) data.page = parseInt(query.page);
        data.jsonld["@id"] += data.page;

        const res2 = await getJhmjList({
            limit: 10,
            page: data.page,
            sort: 2,
        });
        if (res2.code == 1) {
            data.jxwtList = res2.data;
            if (res2.data.length > 0) {
                data.total = res2.data[0].all_count;
                data.jsonld.pubDate = data.jsonld.upDate =
                    res2.data[0].add_time_text;
            }
        }

        return data;
    },

    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: "小竹财税问答-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税问答,财税问答",
                },
                {
                    hid: "description",
                    name: "description",
                    content:
                        "小竹财税问答栏目汇集众多税专家及财税专业导师，他们在财税领域有着丰富的实践经验和深厚的理论功底，能够及时准确的为广大财税从业者和学习者提供专业答疑服务。",
                },
            ],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {
            searchAction: false,
            show: false,
            value: "",
            downLoadAPP: downLoadAPP2,
            showMessage: function (first_answer) {
                if (first_answer && first_answer.length > 0) {
                    let messages = "";
                    for (let item of first_answer) {
                        let msg = JSON.parse(item.message);

                        if (msg.extendedData.type == 111)
                            messages = messages + "[表情] ";
                        else if (msg.extendedData.type == 11)
                            messages = messages + "[图片] ";
                        else
                            messages =
                                messages +
                                JSON.parse(item.message).message +
                                " ";
                    }
                    return messages;
                } else {
                    return "";
                }
            },
        };
    },
    computed: {},
    created() {},
    mounted() {
        console.log(this.jxwtList);
        this.$nextTick(() => {
            goTopSmooth();
        });
        getanalysedata({
            m_id: 4,
            type: 1,
            describe: "小竹问答",
            code: "PC1",
        });
    },
    watch: {},
    methods: {
        // 精选问题
        async getJhmjList() {
            const res = await getJhmjList({
                limit: 10,
                page: this.page,
                sort: 2,
            });
            if (res.code == 1) {
                this.jxwtList = res.data;
                if (res.data.length > 0) this.total = res.data[0].all_count;
                goTopSmooth();
            }
        },
        // 分页
        changePage(page) {
            this.page = page;
            this.$router.push({
                path: "/cswd?page=" + page,
            });
            this.getJhmjList();
        },
        onSearch(){
            if (!this.value) {
                Toast("请输入搜索内容");
                return;
            }
            this.$router.push({
                path: `/cswd/search?k=${this.value}`
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.accounting {
    position: relative;
    background-color: #ffffff;
}
.ssfgk-bj {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}

.cswd-title {
    font-weight: 600;
    font-size: 1.31rem;
    color: #333333;
    text-align: center;
    padding: 1rem 0;
    position: relative;
    z-index: 100;
}

.search {
    position: relative;
    z-index: 100;
    padding: 0 0.4rem;
}

.page {
    width: 92%;
    margin: 0 auto;
    padding: 1rem 0;
}

.ask {
    width: 92%;
    margin: 1.8rem auto 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 100;
    a {
        width: 48%;
    }
    .ask-item {
        width: 48%;
        padding: 0.9rem 1rem;
        padding-right: 0;
        border-radius: 5px;
        display: flex;
        align-items: center;
        img {
            width: 1.93rem;
            height: 1.68rem;
            margin-right: 0.6rem;
        }
        .info {
            color: #ffffff;
            div {
                font-weight: 500;
                font-size: 1rem;
                color: #ffffff;
            }
            span {
                color: rgba($color: #ffffff, $alpha: 0.7);
                font-size: 0.75rem;
            }
        }
    }

    .bg1 {
        background: #4476fe;
        box-shadow: 0px 14px 28px 0px rgba(46, 123, 254, 0.2);
    }
    .bg2 {
        background: #01caa8;
        box-shadow: 0px 14px 28px 0px rgba(0, 198, 163, 0.2);
    }
}

.data-list {
    width: 92%;
    margin: 2.3rem auto 0;
    position: relative;
    z-index: 100;
    .data-tabs {
        font-weight: 500;
        font-size: 1.12rem;
        color: #1c87f3;
        .line {
            height: 0.15rem;
            width: 1.5rem;
            background: #478cff;
            border-radius: 1rem;
            margin-top: 0.6rem;
            position: relative;
            left: 1.45rem;
        }
    }
}

.data-item {
    display: block;
    padding: 0.7rem 0;
    border-bottom: 1px solid #eeeeee;
    .data-title {
        font-weight: 500;
        font-size: 1rem;
        color: #333333;
        line-height: 1.5rem;
        display: block;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 0.5rem;
    }
    .teacher {
        background-color: #f8fafd;
        padding: 0.7rem 0.9rem;
        .user {
            img {
                width: 1.18rem;
                height: 1.18rem;
                margin-right: 0.4rem;
                border-radius: 1.18rem;
                object-fit: cover;
            }
            font-size: 0.68rem;
            line-height: 1.18rem;
            color: #333333;
            display: flex;
            align-items: center;
            margin-bottom: 0.5rem;
        }
        .teacher-ask {
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 控制显示的行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.75rem;
            color: #666666;
            line-height: 1.5;
        }
    }
    .time-view {
        display: flex;
        justify-content: space-between;
        padding-top: 0.43rem;
        div {
            font-size: 0.75rem;
            color: #999999;
        }
    }
}

.moban-dialog {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: 1rem;
    .text1 {
        font-size: 0.93rem;
        color: #222229;
        padding-bottom: 0.5rem;
    }
    .text2 {
        font-size: 1rem;
        font-weight: 600;
        color: #222229;
        span {
            color: #ff6161;
        }
    }
}

.search-action{
    overflow: hidden;
    transition: width 0.6s;
    white-space: nowrap;
}
</style>